<template>
  <view class="content">
    <nav-bar title="授权登录" leftIcon=""></nav-bar>
    <div class="login-box">
      <img src="@/static/img/login.png" alt="">
      <div class="login-box-title">完成登录立刻享受优质生活</div>
      <div class="login-btn login-login" @click="loginClick">授权登录</div>
      <div class="login-btn login-cancer">取消登录</div>
    </div>
    <!-- 弹框 -->
    <uni-popup
      ref="empowerRef"
      background-color="#fff"
      type="bottom"
      @change="empowerChange"
    >
      <div class="empower-content">
        <div class="empower-pje">掌心有信申请</div>
        <div class="user-tip">获取你的昵称、头像</div>
        <div class="user-info-box">
          <div class="user-info-left">
            <img :src="userProfile.userInfo.avatarUrl" alt="">
            <div class="left-tip">
              <div class="left-tip-top">{{ userProfile.userInfo.nickName }}</div>
              <div class="left-tip-bottom">微信个人信息</div>
            </div>
          </div>
          <div class="user-info-right">✔</div>
        </div>
        <div class="empower-bottom">
          <div class="bottom-button refuse" @click="empowerClose">拒绝</div>
          <div class="bottom-button allow" @click="empowerAllow">允许</div>
        </div>
      </div>
    </uni-popup>
  </view>
</template>

<script>
import navBar from '@/components/nav-bar/index.vue'
import $global from '@/module/tipsGroup'
// import Cookies from 'js-cookie'
export default {
  components: {
    navBar
  },
  data () {
    return {
    }
  },
  computed: {
    userProfile () {
      return this.$store.state.userProfile || {
        userInfo: {}
      }
    }
  },
  async onLoad (options) {
    // 获取屏幕的宽高
    uni.getSystemInfo({
      success: (result) => {
        console.log('result', result.statusBarHeight);
        const info = uni.getWindowInfo()
        this.$store.commit('SET_SCREENINFO', {
          width: info.windowWidth,
          height: info.windowHeight,
          statusBarHeight: result.statusBarHeight
        })
      }
    })
  },
  methods: {
    async loginClick () {
      $global.$loading()
      //获取用户信息 （头像和名称）
      const [ ,userProfile ] = await uni.getUserProfile({
        desc: "获取用户信息",
        lang: "zh_CN",
      });
      this.$store.commit('SET_USERPROFILE', userProfile)
      console.log('userProfile', userProfile);
      $global.$hiding()
      this.$refs.empowerRef.open()
    },
    empowerClose () {
      this.$refs.empowerRef.close()
    },
    async empowerAllow () {
      if (this.userProfile) {
        const [, loginInfo] = await uni.login({ provider: "weixin", method: 'POST' });
        if (loginInfo) {
         // 登录临时code
          const { code } =  loginInfo;
          // const {userInfo: { avatarUrl, nickName }} = this.userProfile;
          console.log('loginInfo', loginInfo);
          const loginRes = await this.$store.dispatch('login', {
            appid: 'wx83b10d1a7b8d2310',
            code
          })
          console.log('登录接口获取的数据', loginRes);
          this.empowerClose()
          uni.navigateTo({
            url: '/pages/home-page/index'
          })
        }
      }
    },
    empowerChange (boolObj) {
      if (boolObj.show) {

      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 80rpx;
  &-title {
    padding-top: 20rpx;
    padding-bottom: 90rpx;
    font-size: 20px;
  }
  .login-btn {
    width: 80%;
    border-radius: 40rpx;
    color: $uni-bg-color;
    text-align: center;
    line-height: 86rpx;
  }
  .login-cancer {
    border: 1rpx solid $uni-text-color;
    color: $uni-text-color;
  }
  .login-login {
    background-color: $uni-color-success;
    margin-bottom: 40rpx;
  }
}
.empower-content {
  display: flex;
  flex-direction: column;
  padding: 60rpx 30rpx;
  .empower-pje {
    padding-bottom: 50rpx;
    font-size: $uni-font-size-lg;
  }
  .user-tip {
    font-size: $uni-font-size-base;
  }
  .empower-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .bottom-button {
      padding: 14rpx 60rpx;
      border-radius: 6px;
    }
    .refuse {
      color: $uni-color-success;
      border: 1px solid $uni-text-color-ddd;
    }
    .allow {
      color: $uni-bg-color;
      background: $uni-color-success;
    }
  }
}
</style>
